<template>
  <div class="main-title">
    <ul
      class="block-option-list"
    >
      <li
        v-for="(option, optionIndex) in optionList"
        :key="option.OptionId"
        class="option"
      >
        <div class="option-content">
          <span>
            {{ optionNames[optionIndex] }}.
          </span>
          <VHtml
            tag="span"
            class="option-content-text"
            :html="option.OptionName"
          />
        </div>
      </li>
    </ul>
    <!-- <VHtml
      tag="div"
      class="premise"
      :class="{'premise-data': precondition}"
      :html="precondition"
    /> -->
    <img
      class="arrow imgNotPreview"
      :src="sepLine"
    >
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { AppInfo } from '@/lib/appMethods'
export default Vue.extend({
  components: {
    VHtml: () => import('components/VHtml.vue'),
  },
  props: {
    optionList: {
      type: Array,
      default: () => ([]),
    },
    precondition: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      optionNames: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
      sepLine: require('assets/exam/test_sep_web.png'),
      // sepLine: AppInfo.isApp ? require('assets/exam/question_dividing_line.png')
      //   : require('assets/exam/test_sep_web.png'),
    }
  },
})
</script>

<style lang="scss" scoped>
.main-title {
  margin: 30px 40px 0;
  font-size: 30px;
  color: #666;
  text-align: left;
}
// .block-option-list {
//   margin-bottom: 20px;
// }
.block-option-list {
  :last-child {
    margin-bottom: 0;
    /deep/ table {
      margin-bottom: 20px;
    }
  }
}
.option {
  position: relative;
  margin-bottom: 40px;
}
.option-content {
  color: #666;
  line-height: 40px;
  font-size: 32px;
  display: block;
}
.option-content-text {
  display: inline-block;
  vertical-align: top;
  margin-left: 30px;
  width: calc(100% - 84px);
  word-wrap:break-word;
  word-break:break-all;
  border: none !important;
  /deep/ img {
    max-width: 100%;
    display: block;
    margin-top: 30px;
  }
  /deep/ table {
    width: 100%;
    margin: 20px 0;
    td, th {
      // border: 1px solid #ddd;
      border-color: #ddd;
      border-width: 2px;
      border-style: solid;
      padding: 5px 10px;
    }
    caption {
      // border: 1px solid;
      @include px1border(all, #ddd);
      border-bottom: 0;
      text-align: center;
    }
  }
}
.premise {
  // text-indent: 2em;
  word-wrap:break-word;
  word-break:break-all;
  border: none !important;
  font-size: 34px;
  color: #101010;
  &.premise-data {
    margin-top: 50px;
    /deep/ img {
      margin-top: 30px;
    }
  }
  /deep/ img {
    display: block;
    max-width: 100%;
  }
  /deep/ table {
    // text-indent: 0;
    width: 100%;
    font-size: 30px;
    margin: 20px 0;
    td, th {
      // border: 1px solid #ddd;
      border-color: #ddd;
      border-width: 2px;
      border-style: solid;
      padding: 5px 10px;
    }
    caption {
      // border: 1px solid;
      @include px1border(all, #ddd);
      border-bottom: 0;
      text-align: center;
    }
  }
}
.arrow {
  max-width: 100%;
  margin-top: 50px;
  // margin-bottom: 20px;
}
</style>
